/**
 * Created by Delicate on 2018/1/8.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableWithoutFeedback,
    Animated,
    Linking,
    Clipboard
} from 'react-native';

import Toast from 'react-native-simple-toast'

import NavBar from '../../components/NavBarView'
import Constants from '../../config/Constants'

let _self;

class Views extends React.Component {

    constructor(props) {
        super(props)
        _self = this;
        this.state = {
            x: new Animated.Value(0)
        }
    }

    componentWillMount() {

    }

    componentDidMount() {
        _self.lineAnimated();
    }

    lineAnimated() {
        _self.state.x.setValue(0);
        Animated.timing(_self.state.x,{
            duration: 3000,
            toValue: 1
        }).start(()=>{
            _self.lineAnimated()
        })
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <View style={[base.clientWH, styles.container]}>
                    <Image source={require('../../sources/image_auth_approving.png')} style={styles.topBox} resizeMode={'cover'}>
                        <Animated.Image style={[styles.topLine, {
                            opacity: this.state.x,
                            transform: [
                                {
                                    translateX: this.state.x.interpolate({
                                        inputRange: [0, 1],
                                        outputRange: [layout.MAX_WIDTH, layout.width(-268)]
                                    })
                                }
                            ]
                        }]} source={require('../../sources/image_auth_approving_line.png')} resizeMode={'contain'}/>
                    </Image>
                    <View style={[base.columnCC, styles.textBox]}>
                        <Text allowFontScaling={false} style={styles.content}>客户经理正在抓紧审核中，请耐心等待。审核结果将以短信及系统通知的方式告知您。</Text>
                        <Text allowFontScaling={false} style={styles.tip}>如有疑问，请联系客服电话</Text>
                        <TouchableWithoutFeedback onPress={()=>{
                            Linking.openURL('tel:'+Constants.APP_CUSTOMER_TEL).catch(err=>{
                                Clipboard.setString(Constants.APP_CUSTOMER_TEL);
                                Toast.show('已将客服电话复制到您的剪贴板')
                            })
                        }}>
                            <View>
                                <Text allowFontScaling={false} style={styles.tel}>{Constants.APP_CUSTOMER_TEL_VIEW}</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </View>
                <NavBar
                    leftEvent={()=>{
                        this.props.navigation.goBack('Mine')
                    }}
                    back={true}
                    leftIcon={require('../../sources/icon_global_back.png')}
                    boxStyle={styles.navBar}
                    host={this}
                    title="资料审核中"/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    navBar: {
        position: 'absolute',
        top: 0,
        left: 0,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    container: {},
    topBox: {
        width: layout.MAX_WIDTH,
        height: layout.height(350)
    },
    topLine: {
        width: layout.width(268),
        height: layout.height(350)
    },
    textBox: {
        flex: 1,
        width: layout.MAX_WIDTH,
        backgroundColor: '#fff',
    },
    content: {
        flex: 1,
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE,
        paddingVertical: layout.GAP_VERTICAL_LARGE,
        fontSize: layout.font(28),
        color: layout.MAIN_FONT_COLOR,
        lineHeight: layout.heightToFixed(40)
    },
    tip: {
        paddingBottom: layout.GAP_VERTICAL_SMALL,
        fontSize: layout.font(30),
        color: layout.MAIN_FONT_COLOR
    },
    tel: {
        marginBottom: layout.height(120),
        fontSize: layout.font(36),
        color: layout.MAIN_COLOR,
        fontWeight: '700'
    },
})

//路由
const AuthApprove = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AuthApprove',
    sign: true
};

export default AuthApprove;